<template>
  <div class="w-full h-full bg-grey" v-if="detail">
    <!-- 打电话弹出层 -->
    <van-action-sheet
      v-model="sheetShow"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      @cancel="onCancel"
    />
    <van-nav-bar
      class="bg-lightred text-white"
      title="订单详情"
      left-arrow
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <!-- 1  已下单  2交易完成  3已评价  4已取消 -->
    <div v-if="detail.status === 1" class="bg-lightred p-20 p-v-30 flex j-between a-center">
      <p class="fs-rem-25px text-white">已下单</p>
      <p class="fs-80 text-white">
        <svg-icon class="rotate-15" name="order-pending" />
      </p>
    </div>
    <div
      v-else-if="detail.status === 2 || detail.status === 3"
      class="bg-lightred p-20 p-v-30 flex j-between a-center"
    >
      <p class="fs-rem-25px text-white">已完成</p>
      <p class="fs-80 text-white">
        <svg-icon class="rotate-15" name="order-done" />
      </p>
    </div>
    <div v-else-if="detail.status === 4" class="bg-lightred p-20 p-v-30 flex j-between a-center">
      <p class="fs-rem-25px text-white">已取消</p>
      <p class="fs-80 text-white">
        <svg-icon class="rotate-15" name="order-done" />
      </p>
    </div>
    <div class="main bg-grey p-10">
      <!-- 订单详情 -->
      <div class="bg-white">
        <p class="icon-title flex j-between p-10 b-b">
          <router-link :to="`/goods/merchant/${detail.bid}`" class="flex a-center fs-rem-14px text-content">
            {{detail.bname}}
            <van-icon name="arrow" />
          </router-link>
          <!-- <van-icon @click="handleOpenSheet()" class="fs-rem-20px text-content" name="phone-o" /> -->
        </p>
        <div class="text-content fs-rem-12px p-10 b-b">
          <p class="flex j-between p-v-5">
            <span>{{detail.gname}}</span>
            <span class="text-red fs-rem-16px">{{detail.zk / 10}}折</span>
          </p>
          <p>x 1</p>
        </div>
        <div class="text-content fs-rem-12px p-10 b-b">
          <p v-if="detail.nprice" class="flex j-between p-v-5">
            <span>优惠价</span>
            <span class="text-red">¥{{detail.nprice}}</span>
          </p>
          <p v-if="detail.fprice" class="flex j-between p-v-5">
            <span>门市价</span>
            <span>{{detail.fprice}}</span>
          </p>
          <p class="flex j-between p-v-5">
            <span>消费方式</span>
            <span>{{detail.method === 1 ? '预约' : '到店'}}</span>
          </p>
        </div>
        <div class="p-10 flex j-end" v-if="detail.status === 2">
          <van-button size="small" round type="danger" to="/user/order/evaluate/123" plain>评价商家</van-button>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="bg-white m-t-10">
        <div class="icon-title p-10 b-b fs-rem-14px text-content">订单信息</div>
        <div class="p-v-10">
          <div class="flex fs-rem-12px text-content p-10 p-v-5">
            <p class="w-80 flex-s-0">订单编号</p>
            <p>{{detail.ddh}}</p>
          </div>
          <div class="flex fs-rem-12px text-content p-10 p-v-5">
            <p class="w-80 flex-s-0">商品编码</p>
            <p>{{detail.gid}}</p>
          </div>
          <div class="flex fs-rem-12px text-content p-10 p-v-5">
            <p class="w-80 flex-s-0">下单时间</p>
            <p>{{detail.dtime}}</p>
          </div>
          <div class="flex fs-rem-12px text-content p-10 p-v-5">
            <p class="w-80 flex-s-0">截止时间</p>
            <p>{{detail.etime}}</p>
          </div>
          <div class="flex fs-rem-12px text-content p-10 p-v-5">
            <p class="w-80 flex-s-0">经销商编码</p>
            <p>{{detail.bid}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      detail: null,
      sheetShow: false,
      actions: [{ name: null }]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getDetail()
    },
    handleOpenSheet () {
      this.actions[0].name = this.detail.bmobile || ''
      this.sheetShow = true
    },
    onSelect (item) {
      this.sheetShow = false
      window.location.href = `tel:${item.name}`
    },
    onCancel () {
      this.sheetShow = false
    },
    async getDetail () {
      let { zxVipXf } = await this.$api.post('/xf/user/query', {
        id: this.$route.params.id
      })
      this.detail = zxVipXf
    }
  }
}
</script>

<style lang="scss" scoped>
$lightred: #fa6b4f;
.bg-lightred {
  background: $lightred;
}
.rotate-15 {
  /deep/ svg {
    transform: rotate(15deg);
  }
}
.icon-title {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 3px;
    height: 15px;
    background: #fa6b4f;
  }
}
.van-nav-bar .van-icon {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-hairline--bottom::after {
  border: none;
}
</style>
